<template>
	<view>
		<view class="status_bar01"></view>
		<view class="header">
			<view class="more iconfont" @tap="backPage">&#xe8c8;</view>
			<view class="search">
				<view class="icon iconfont">&#xe605;</view>
				<input type="text" v-model="kw" placeholder="搜索更多商品" @confirm="search" confirm-type="search" />
			</view>
		</view>

		<!-- <view class="fl_menu" >
			<view class="auto_menu">
				<block v-for="(item, index) in main_cate" :key="'main_cate' + index" v-if="item.sort_order > 0">
					<view class="menu" :data-index="index" :data-cid="item.cid" @tap="setFlMenu">
						<view class="img"><image :src="item.image" mode="widthFix"></image></view>
						<view class="text" :class="item.cid == cid ? 'fl_color' : ''">{{item.name}}</view>
					</view>
				</block>
			</view>
		</view> -->

		<view class="nav_box" id="nav_box">
			<view class="nav">
				<block v-for="(item, index) in menu01" :key="'menu01' + index">
					<view class="menu iconfont" :class="{ menucolor: item.menucolor }" @tap="setContentMenu(menu01, index)">
						{{ item.text }}
						<image :src="item.icon" mode="widthFix"></image>
					</view>
				</block>
				<!-- <view class="menu iconfont">积分  &#xe600;</view> -->
			</view>
		</view>

		<view class="clear_box08" :style="{ height: descHeight + 'px' }"></view>

		<!-- 商品 -->
		<view class="goods_box">
			<block v-for="(item, index) in dataList" :key="'goods' + index">
				<view class="goods" :data-url="'/pages/goods/goods?id=' + item.goods_id" @click="gotopage">
					<view class="good_img"><image :src="item.image" mode=""></image></view>
					<view class="title">{{ item.name }}</view>
					<!-- <view class="no_money">
						<view class="no_num">￥325.00<view class="line"></view></view>
					</view> -->
					<view class="money_box">
						<view class="money" v-if="item.pay_type == 1">
							<view class="m">¥</view>
							{{ item.price }}
						</view>
						<view class="money" v-if="item.pay_type == 2">
							<view class="m"></view>
							积分:{{ item.price }}
						</view>
						<view class="money" v-if="item.pay_type == 3">
							<view class="m"></view>
							积分：{{ item.pay_znb }}
						</view>

						<view class="num iconfont22">&#xe600;</view>
					</view>
				</view>
			</block>
		</view>
		<!-- <view class="f_btn">
			<view class="f_btn_box" @click.stop="goFun('1')">
				<image class="f_b_img" src="../../static/lb.png" mode="widthFix"></image>
				<view class="f_b_txt">升级礼包</view>
			</view>
			<view class="f_btn_box" @click.stop="goFun('2')">
				<image class="f_b_img" src="../../static/fc.png" mode="widthFix"></image>
				<view class="f_b_txt">电长风采</view>
			</view>
		</view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			flsel:0,
			marks:0,
			main_cate: [],
			j: 1,
			descHeight: 0,
			kw: '',
			cid: 0,
			by: 'views',
			page: 1,
			type: 0,
			category: [],
			dataList: [],
			filter: [{ name: '综合', by: 'views', check: true }, { name: '销量', by: 'sales', check: false }, { name: '价格', by: 'price', check: false }],

			menu01: [
				{
					text: '综合',
					icon: '../../static/delta01.png',
					by: 'goods_id'
				},
				{
					text: '销量',
					icon: '../../static/delta01.png',
					by: 'sales'
				},
				{
					text: '价格',
					icon: '../../static/delta01.png',
					by: 'price'
				}
			],

			goods: [
				
			]
		};
	},
	onShareAppMessage(res) {
		console.log('分享', res);
	
		return {
			title: '汉家承',
			path: "/pages/list/list?cid="+this.cid,
			imageUrl: '',
			desc: '',
			content: '',
			success(res) {
				uni.showToast({
					title: '分享成功'
				});
			},
			fail(res) {
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				});
			}
		};
	},
	onShareTimeline(res) {
		console.log('分享', res);
	
		return {
			title: '汉家承',
		    path: "/pages/list/list?cid="+this.cid,
			imageUrl: '',
			desc: ' ',
			content: ' ',
			success(res) {
				uni.showToast({
					title: '分享成功'
				});
			},
			fail(res) {
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				});
			}
		};
	},
	onLoad(e) {
		let me = this;
		me.cid = e.cid || 0;
		me.kw = e.kw || '';
		me.type = e.type || 0;
		me.marks = e.marks || 0;
		if (me.kw != '') me.cid = 0;
		// me.Net._get('filter1',{},(res)=>{
		// 			me.main_cate = res.data.main_cate;
				
		// 		console.log(res.data)
		// 	}); 
		me.loadData();
		let list = this.menu01;
		list[0].icon = '../../static/delta02.png';
		this.$set(list[0], 'menucolor', true);

		// let list02 = this.menu02;
		// list02[0].icon = '../../static/delta02.png';
		// this.$set(list02[0], 'menucolor', true);
	},
	onReachBottom() {
		this.loadMore();
	},
	onReady() {
		var that = this;
		const query = uni.createSelectorQuery().in(this);
		query
			.select('#nav_box')
			.boundingClientRect(data => {
				// console.log("得到布局位置信息" + JSON.stringify(data));
				// console.log(data.height);
				that.descHeight = data.height + 50 + uni.getSystemInfoSync().statusBarHeight;
				console.log(that.descHeight);
			})
			.exec();
	},
	methods: {
		onPullDownRefresh() {
			let me = this; // 下拉监听事件
			// setTimeout(function() {
					uni.stopPullDownRefresh();
			me.loadMore();
			// }, 500);
		},
		setFlMenu(e){
			let me = this;
			let index = e.currentTarget.dataset.index;
			me.cid = e.currentTarget.dataset.cid;
			me.page=1;
			me.loadData();
			this.flsel = me.cid;
		},
		loadData() {
			let me = this;
			let page = me.page;
			let cid = me.cid;
			let by = me.by;
			let kw = me.kw;
			let type = me.type;
			let marks = me.marks;
			
			me.Net._get('filter', { kw: kw, cid: cid, by: by, page: page, type: type , marks: marks}, res => {
				let r = res.data.cate;
				r.unshift({ cid: 0, name: '全部', check: false });
				let b = [];
				r.forEach(item => {
					if (item.cid == cid) item.check = true;
					b.push(item);
				});
				me.category = b;
				me.dataList = res.data.list;
				//me.main_cate = res.data.main_cate;
				console.log(me.dataList);
			});
			me.setFilter();
		},
		search() {
			let me = this;
			me.cid = 0;
			me.by = 'goods_id';
			me.setCate();
			me.setFilter();
			me.page = 1;
			me.dataList = [];
			me.loadData();
		},
		loadMore() {
			let me = this;
			me.page = me.page + 1;
			me.loadDataAgain();
		},
		loadDataAgain() {
			let me = this;
			let page = me.page;
			let cid = me.cid;
			let by = me.by;
			let kw = me.kw;
			if (kw != '') cid = 0;
			let type = me.type;
			let marks = me.marks;
			me.Net._get('filter', { kw: kw, cid: cid, by: by, page: page ,type: type , marks: marks}, res => {
				let r = me.dataList;
				let g = res.data.list;
				if (g.length > 0) {
					g.forEach(item => {
						r.push(item);
					});
				}
				me.dataList = r;
			});
		},
		setFilter() {
			let me = this;
			let by = me.by;
			let filter = me.filter;
			let r = [];
			filter.forEach(item => {
				if (item.by == by) item.check = true;
				else item.check = false;
				r.push(item);
			});
			me.filter = r;
		},
		//重置分类
		setCate() {
			let me = this;
			let cid = me.cid;
			let cate = me.category;
			let r = [];
			cate.forEach(item => {
				if (item.cid == cid) item.check = true;
				else item.check = false;
				r.push(item);
			});
			me.category = r;
		},
		gotopage(e) {
			let url = e.currentTarget.dataset.url;
			uni.navigateTo({
				url: url
			});
		},
		goFun(type){
			uni.showToast({
				title:'类型'+type,
				icon:'none'
			})
		},
		backPage() {
			uni.navigateBack();
		},
		setContentMenu(list, index) {
			list.forEach(item => {
				item.icon = '../../static/delta01.png';
				this.$set(item, 'menucolor', false);
			});
			list[index].icon = '../../static/delta02.png';
			this.$set(list[index], 'menucolor', true);
			let me = this;
			me.kw = '';
			me.by = list[index].by;
			me.page = 1;
			me.dataList = [];
			me.loadDataAgain();
		},
		setContentMenu02(list, index) {
			list.forEach(item => {
				// item.icon = '../../static/delta01.png';
				this.$set(item, 'menucolor', false);
			});
			// list[index].icon = '../../static/delta02.png';
			this.$set(list[index], 'menucolor', true);
		}
	}
};
</script>

<style>
.clear_box08 {
	width: 100%;
	/* height: calc(140px + var(--status-bar-height)); */
}

.header {
	width: 100%;
	height: 50px;
	display: flex;
	position: fixed;
	top: var(--status-bar-height);
	/* background-image: linear-gradient(#4d726f, #b4eef7); */
	background-color: #4d726f;
	z-index: 9999;
}

.header .location_box {
	height: 50px;
	width: 70px;
	display: flex;
	margin-right: 10px;
}

.header .location_box .location {
	font-size: 14px;
	color: #fff;
	line-height: 50px;
	margin-right: 5px;
	margin-left: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.header .location_box .arrow {
	font-size: 10px;
	color: #666;
	line-height: 50px;
}

.header .search {
	width: calc(100% - 40px);
	height: 30px;
	margin-top: 10px;
	display: flex;
	background-color: #fff;
	border-radius: 30px;
}

.header .search .icon {
	font-size: 14px;
	color: #666;
	line-height: 30px;
	margin-left: 10px;
}

.header .search input {
	font-size: 12px;
	color: #333;
	height: 30px;
	line-height: 30px;
	margin-left: 10px;
}

.header .more {
	width: 30px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-size: 16px;
	color: #fff;
}

.nav_box {
	width: 100%;
	background-color: #fff;
	position: fixed;
	top: calc(50px + var(--status-bar-height));
	z-index: 999;
}

.nav {
	width: 100%;
	display: flex;
	justify-content: center;
}

.nav .menu {
	width: 33%;
	display: flex;
	height: 40px;
	justify-content: center;
	font-size: 12px;
	color: #999;
	line-height: 40px;
	box-sizing: border-box;
	border-bottom: 1px solid #f5f5f5;
}

.nav .menu image {
	width: 12px;
	margin-left: 5px;
	margin-top: 13px;
}

.menucolor {
	color: black !important;
}

.goods_box {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: left;
	flex-wrap: wrap;
	margin-top: 3vw;
	position: relative;
	z-index: 1;
}

.goods_box::after {
	flex: auto;
	content: '';
}

.goods_box .goods {
	width: 45%;
	flex-basis: auto;
	margin-bottom: 3%;
	margin-left: 3%;
	border-radius: 4px;
	background-color: #fff;
	padding-bottom: 40px;
	padding-left: 10rpx;
	padding-right: 10rpx;
	position: relative;
	padding-top: 10rpx;
	box-shadow: 0px 4px 4.65px 0.35px rgba(51, 51, 51, 0.09);
}

.goods_box .goods .good_img {
	width: 100%;
	height: 168px;
	border-radius: 6px;
	text-align: center;
	position: relative;
}

.goods_box .goods .good_img image {
	width: 168px;
	height: 100%;
	border-radius: 6px;
}

.goods_box .goods .title {
	font-size: 3.5vw;
	color: #232426;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	padding: 0 5px;
	line-height: 20px;
	font-weight: bold;
	margin-top: 10px;
}

.goods_box .goods .no_money {
	width: 94%;
	margin: 0 auto;
	display: flex;
	margin-top: 1vw;
	margin-bottom: 2vw;
}

.goods_box .goods .no_money .no_num {
	font-size: 3vw;
	color: #999;
	position: relative;
}

.goods_box .goods .no_money .no_num .line {
	width: 100%;
	height: 1px;
	background-color: #b0b0b0;
	position: absolute;
	left: 0;
	top: calc(50% - 0.5px);
}

.goods_box .goods .money_box {
	width: 100%;
	height: 40px;
	display: flex;
	position: absolute;
	bottom: 0;
}

.goods_box .goods .money_box .money {
	flex: 1;
	display: flex;
	color: #fe4816;
	font-size: 4vw;
	margin-left: 3%;
}

.goods_box .goods .money_box .money .m {
	font-size: 3vw;
	margin-top: 0px;
	margin-right: 5px;
}

.goods_box .goods .money_box .num {
	width: 7vw;
	height: 7vw;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 4.5vw;
	text-align: center;
	background-color: #4d726f;
	margin-right: 3vw;
}

.fl_menu {
	width: 100%;
	height: 80px;
	position: fixed;
	top: calc(50px + var(--status-bar-height));
	z-index: 999;
	background-color: #fff;
	box-sizing: border-box;
	border-bottom: 1px solid #f5f5f5;
	overflow: hidden;
	overflow-x: auto;
}

.fl_menu .auto_menu {
	width: fit-content;
	display: flex;
	
}

.fl_menu .auto_menu .menu {
	width: 20vw;
}

.fl_menu .auto_menu .menu .img {
	width: 100%;
	text-align: center;
	margin-top: 1vw;
}

.fl_menu .auto_menu .menu .img image {
	width: 65%;
	height: 13vw !important;
}

.fl_menu .auto_menu .menu .text {
	font-size: 3.5vw;
	color: #333;
	text-align: center;
}

.fl_color{
	color: #4d726f !important;
}

.f_btn{
	position: fixed;
	width: 130rpx;
	z-index: 12;
	bottom: 12vh;
	right: 30rpx;
}
.f_btn .f_btn_box{
	width: 100%;
	text-align: center;
}
.f_btn .f_btn_box:not(:first-child){
	margin-top: 20rpx;
}
.f_btn .f_btn_box .f_b_img{
	width: 100rpx;
	height: 100rpx;
	position: relative;
	z-index: 2;
}
.f_btn .f_btn_box .f_b_txt{
	font-size: 28rpx;
	background: #ffcf0e;
	margin-top: -23rpx;
	position: relative;
	z-index: 1;
	padding: 12rpx 0 6rpx;
	color: #FFFFFF;
	border-radius: 25rpx 25rpx 15rpx 15rpx;
}

.header .icon {
    margin-right: 0vw !important;
}
</style>
